<template>
	<!-- 主页页面布局 -->
	<div class="home">
		<div class="homeContainer">
			<div class="homeHeader">
				<HomeHeader :isInput="dataArr.isInput" 
					:iconArr="dataArr.iconArr" 
					:placeholder="dataArr.placeholder"
					:aimUrl="dataArr.aimUrl"
					:rightUrl="dataArr.rightUrl"
					:centerUrl="dataArr.centerUrl"
				/>
			</div>

			<div class="homeBanner">
				<template>
	  				<swiper :options="swiperOption">
	    				<swiper-slide v-for="(slide,index) in swiperSlides" :key="index">
	    				 <img :src="slide" alt="">
	    				</swiper-slide>
	    			<div class="swiper-pagination" slot="pagination"></div>
	  				</swiper>
				</template>
			</div>
			<div class="homeSelect">
				<div class="selectContent">
					<router-link to='/roommatepage'>找室友</router-link>
					<router-link to='/communitypage'>宜居社区</router-link>
				</div>
			</div>
			<div class="hotHouse">
				<p><a href="javascript:;">热门房源</a></p>
			</div>
			<div class="houseList1" v-for="(item,index) in houseListArr" :key="index">
				<img :src="item.imgUrl" alt="">
				<div class="houseListText">
					<p class="textFirst">
						<span>{{ item.place }}</span>
						<span>{{ item.address }}</span>
					</p>
					<p class="textSecond">
						<span>{{ item.introduce }}</span>
						<span>-{{ item.area}}m<sup>2</sup></span>
					</p>
					<a class="wholeRent">{{ item.type }}</a>
					<span class="price">{{ item.price }}/月</span>
				</div>
			</div>
			<!-- 房源信息展示 -->
			<div class="zhanWei">
				
			</div>
		</div>
		<FooterNav />
	</div>
</template>
<script>
	import FooterNav from "../components/footernav"
	import HomeHeader from "./homepages/components/homeheader"
	export default{
		name:'home',
		data(){
			return{
				dataArr:{
					isInput:true,
					iconArr:[
						{
							iconLeft:"icon-location",
							iconRight:"icon-xiaoxi"
						}
					],
					placeholder:"请输入你想要入住的小区",
					aimUrl:"/localize",
					rightUrl:"/wonews",
					centerUrl:'/searchpage'
				},
				swiperSlides:[
					require("../assets/images/shouye/banner.png"),
					require("../assets/images/shouye/banner.png"),
					require("../assets/images/shouye/banner.png"),
				],
				swiperOption: {
         			autoplay:true,
         			loop:true,
         			pagination: {
    					el: '.swiper-pagination',
    					type: 'bullets',
    					clickable:true
  					},
        		},
        		houseListArr:[
        			{
        				imgUrl:require('../assets/images/shouye/photo1.png'),
        				place:'东城区',
        				address:'安外大街3号院',
        				introduce:'1室1厅1卫',
        				area:'48',
        				type:'整租',
        				price:'4800'
        			},
        			{
        				imgUrl:require('../assets/images/shouye/photo2.png'),
        				place:'东城区',
        				address:'安外大街4号院',
        				introduce:'3室1厅1卫',
        				area:'90',
        				type:'合租',
        				price:'4000'
        			},
        			{
        				imgUrl:require('../assets/images/shouye/photo1.png'),
        				place:'东城区',
        				address:'安外大街1号院',
        				introduce:'1室1厅1卫',
        				area:'44',
        				type:'整租',
        				price:'4900'
        			}

        		]
      		}
		},
		components:{
			FooterNav,
			HomeHeader
		},
		computed:{
			// getInfo(){
			//  console.log(this.$route.params.localPlace1)
			// },
			// 	localHotPlace(){
			// 	 console.log(this.$route.params.localPlace2)
			// }
		}
	}
</script>
<style scoped lang="less">
.home{
	width: 100%;
	margin-bottom: 100 / 100rem;
	.homeContainer{
		width: 100%;
		height: auto;
		text-align: center;
		overflow: hidden;
	}
}
.homeBanner{
	width: 100%;
	margin-top: 92 / 100rem;
	margin-top: 44 / 50rem;
}
.homeSelect{
	width: 100%;
	height: auto;
	border:none;
	background: #green;
	text-align: center;
	overflow: hidden;
	padding:0 10/50rem;
	box-sizing: border-box;
}
.selectContent{
	width: 355/50rem;
	height: 65/50rem;
	margin-top: 12/50rem;
}
.selectContent a{
	display: block;
	float: left;
	width: 172.5/50rem;
	height: 65/50rem;
	text-align: center;
	color: #fff;
	font-size: 20/50rem;
	font-weight: 700;
	line-height: 65/50rem;
	background-color: #ff5555;
	border-radius: 5/50rem;
}
.selectContent a:nth-child(2){
	margin-left: 10/50rem;
}
.hotHouse{
	width: 100%;
	padding: 0 10/50rem;
	p{
		margin-left: 0;
		margin-top: 29/100rem;
		margin-bottom: 12/100rem;
		text-align: left;
		a{
			font-size:30/100rem;
			font-weight: 700;
			color: rgba(0, 0, 0, 0.8);
		}
	}
}
// 房源信息展示布局样式
.houseList1{
	width: 750/100rem;
	height: 344/100rem;
	position: relative;
	img{
		width: 750/100rem;
		height: 344/100rem; 
	}
	.houseListText{
		width: 750/100rem;
		height: 100/100rem;
		background-color: rgba(255, 255, 255, 0.7);
		position:absolute;
		bottom: 0;
		left: 0;
		right: 0;
		.textFirst{
			position: absolute;
			left: 120/100rem;
			top:18/100rem;
			span{
				font-size: 12/100rem;
				color: rgba(0, 0, 0, 0.8);
				font-weight: 700;
			}
		}
		.textSecond{
			position: absolute;
			left: 120/100rem;
			bottom:18/100rem;
			span{
				font-size: 12/100rem;
				color: rgba(0, 0, 0, 0.8);
				font-weight: 700;
				sup{
					font-size: 8/100rem;
				}
			}
		}
		.wholeRent{
			display: inline-block;
			width: 113/100rem;
			height: 50/100rem;
			color: #618698;
			font-size: 13/100rem;
			border-radius: 8/100rem;
			text-align: center;
			vertical-align: middle;
			line-height:50/100rem;
			border:1/100rem solid #618698;
			position: absolute;
			right: 108/100rem;
			top:10/100rem;
			box-shadow: 0 0 2px 2px #618698; 
		}
		.price{
			position: absolute;
			right: 118/100rem;
			top: 70/100rem;
			color: #ff5555;
			font-size: 12/100rem;
			font-weight: 700;
		}
	}
}

</style>